import {Component, createContext, useContext,useState} from "react"
import Form from "./components/Form";
import Table from "./components/Table"
import RenderList from './components/RenderList'
import CustomEvent from "./components/CustomEvent";
import DisableDefault from "./components/DisableDefault";
import ChangeStateObject from './components/ChangeStateObject'
import ChangeStateArray from "./components/ChangeStateArray";
import TodoList from "./components/TodoList";
import AddUserComponent from "./components/ContextAndReducer";

const Container = ({children})=>{
  return <div className="container">{children}</div>
}

class TestExample extends Component{
    // js写法
    // render () {
    //   const msg = 'Hello, React!'
    //   const title = createElement('h1', { key: 'title-1' }, msg)
    //   const table = createElement(Table, { key: 'table-1' })
    //   return createElement('div', { className: 'App' }, [title, table])
    // }

    // 将数据添加到state当中去
    state = {
        characters: [
            {
                name: 'Charlie',
                job: 'Janitor',
            },
            {
                name: 'Mac',
                job: 'Bouncer',
            },
            {
                name: 'Dee',
                job: 'Aspring actress',
            },
            {
                name: 'Dennis',
                job: 'Bartender',
            },
        ]
    }

    // 删除数据函数
    removeCharacter = (index) => {
        const { characters } = this.state;
        this.setState({
            characters: characters.filter((item, i) => index !== i)
        })
    }

    // 添加数据函数
    addCharacter = (obj) => {
        const { characters } = this.state
        characters.push(obj)
        this.setState({
            characters: characters
        })
    }
    render() {
        const msg = 'Hello, React!';
        const { characters } = this.state;
        const customEvent = {
            onPlay:()=>{
                alert('on playing!')
            },
            onPause:()=>{
                alert('on pause~')
            }
        }
        const caughtClick = ()=>{
            console.log('捕获到了点击事件');
        }
        return (
            <>
                <Container>
                    <h1>{msg}</h1>
                </Container>
                <Container>
                    <Table data={characters} removeCharacter={this.removeCharacter} />
                    <Form addData={this.addCharacter} />
                </Container>
                <Container>
                    <RenderList/>
                </Container>
                <Container onClick={caughtClick}>
                    <CustomEvent {...customEvent}/>
                </Container>
                <Container onClick={caughtClick}>
                    <DisableDefault/>
                </Container>
                <Container onClick={caughtClick}>
                    <DisableDefault/>
                </Container>
                <Container>
                    <ChangeStateObject/>
                </Container>
                <Container>
                    <ChangeStateArray/>
                </Container>
            </>
        )
    }
}
const FirstContext = createContext('初始化')

const DemoChild = () => {
    // useContext函数用于访问Context对象
    const contextValue = useContext(FirstContext)
    return <h1>{contextValue}</h1>
}

class App extends Component {
    state = {
        inputValue:""
    }
  // jsx写法
    render() {
        return (
            <>
                {/*<TestExample/>*/}
                {/*<TodoList/>*/}
                {/*<AddUserComponent/>*/}
                <input value={this.state.inputValue} onChange={(e) => this.setState({inputValue:e.target.value})}/>
                <DemoChild/>
                <FirstContext.Provider value={this.state.inputValue}>
                    <input value={this.state.inputValue} onChange={(e) => this.setState({inputValue:e.target.value})}/>
                    <DemoChild/>
                </FirstContext.Provider>
            </>
        )
    }
}

export default App